<template>
  <el-image v-if="isExternal" :style="setIconSvgStyle" draggable="false" :src="url" fit="fill" />
  <svg v-else :style="setIconSvgStyle" aria-hidden="true">
    <use :href="symbolId" />
  </svg>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const symbolId = computed(() => `#${props.name}`)
    const url = computed(() => `${props.name}`)

    function external(path) {
      return /^(https?:|http?:|\/src)/.test(path)
    }

    const isExternal = computed(() => external(props.name))

    const setIconSvgStyle = computed(() => {
      return `width: 100%;height: 100%;`;
    });

    const svgClass = computed(() => {
      return 'svg-icon'
    })
    return {symbolId,url,svgClass,setIconSvgStyle,isExternal}
  }
})
</script>
<style scope>

</style>